<template>
  <div>
      <div class="com-top-nav">
        <van-nav-bar
        title="首页"
      />
      </div>
      <div indexSwipe>
        <van-swipe :autoplay="3000">
          <van-swipe-item><img src="/static/img/qsmy1.png" alt=""></van-swipe-item>
          <van-swipe-item><img src="https://img.yzcdn.cn/2.jpg" alt=""></van-swipe-item>
          <van-swipe-item><img src="https://img.yzcdn.cn/2.jpg" alt=""></van-swipe-item>
          <van-swipe-item><img src="https://img.yzcdn.cn/2.jpg" alt=""></van-swipe-item>
        </van-swipe>
      </div>
      <div>
          <van-row class="user-links">
            <van-col span="6">
            <van-icon name="pending-payment" />
            待付款
            </van-col>
            <van-col span="6">
            <van-icon name="pending-orders" />
            待接单
            </van-col>
            <van-col span="6">
            <van-icon name="pending-deliver" />
            待发货
            </van-col>
            <van-col span="6">
            <van-icon name="logistics" />
            待发货
            </van-col>
          </van-row>
      </div>
      <bottom-person-nav/>
  </div>
</template>
<script>
import bottomNav from '../components/person-nav.vue'
import Vue from 'vue'
import { NavBar,Swipe, SwipeItem,Row, Col, Icon,} from 'vant';

Vue.use(NavBar)
Vue.use(Swipe)
Vue.use(SwipeItem);
Vue.use(Row)
Vue.use(Col)
Vue.use(Icon);
export default {
  data(){
      return {

      }
    },
    components:{
        'bottom-person-nav':bottomNav,
        Swipe, SwipeItem,Row, Col, Icon,
    }
}
</script>

<style lang="less" scope>
@import url('../../static/style/bottom-person-nav.less');
.demo-color-btn {
  margin: 8px;
}
  &-poster {
    width: 7.5rem;
    height: 4rem;
    display: block;
  }
  &-links {
    padding: 15px 0;
    font-size: 12px;
    text-align: center;
    background-color: #fff;
    .van-icon {
      display: block;
      font-size: 24px;
    }
  }
</style>
